<template>
  <div class="logo">
    <img :src="logo" alt="logo">
    <h1>光储直柔</h1>
  </div>
  <el-menu :router="true" :default-active="$route.path">
    <MenuItem v-for="item in menuItems" :item="item" :key="item.url" :index="item.url">
    </MenuItem>
  </el-menu>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/auth';
import MenuItem from '@/components/navMenu/MenuItem.vue';
import logo from '@/assets/logo.png'

const useStore = useUserStore();
const menuItems = useStore.menu;


</script>


<style scoped lang="less">
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  height: 40px;

  img {
    width: 35px;
    height: 35px;
    margin-right: 10px;
  }

  h1 {
    font-size: 25px;
    color: rgb(15, 53, 147);
    font-weight: bold;
    margin-right: -10px;
  }
}

.el-menu {
  border-right: none;
}


</style>